<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>moonJs demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style>
html, body, p, div {margin:0;padding:0;}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<script type="text/javascript" src="../libs/minicomps.min.js"></script>
<script src="../libs/easeljs.js"></script>
<script src="../libs/Unify.js"></script>
<script>
    const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,Image,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown} = mc
	const SAVE_NAME='madeCar';
    canvas=document.getElementById('canvas');
    canvas.style.backgroundColor = '#999999';
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    var stage=new createjs.Stage(canvas);
    let layer=new createjs.Container();
    let saveLayer=new createjs.Container();
    let btnLayer=new createjs.Container();
    btnLayer.x=5;btnLayer.y=350;
    saveLayer.x=saveLayer.y=10;
    layer.x=layer.y=10;
    stage.addChild(layer);
    stage.addChild(btnLayer);
    var colorObj={w:'#ffffff',r:'#ff0000',y:'#ffff00',b:'#0088ff',g:'#00ff00',p:'#ff00ff',ran:'#000000'};
    var xnum=6,ynum=6,wid=50;
    var maps=[];
    for(let i=0;i<xnum;i++){
        for(let j=0;j<ynum;j++){
            let map=createBox(wid,wid,colorObj.w,`${j},${xnum-i-1}`);
            map.addEventListener('mousedown',onChangeColor);
            maps.push(map);
        }
    }
    displayRank(maps,xnum,0,0,0,0);
    var label=new createjs.Text('0表示竖2，1表示竖3，2表示横2，3表示横3');
    label.x=333;
    label.y=20;
    stage.addChild(label);
    stage.addEventListener('stagemousemove',(e)=>{
        if(this.canColor){
            for(let i=0;i<maps.length;i++){
                let map=maps[i];
                //console.log(e.stageX,e.stageY,con.hitTest(e.stageX,e.stageY))
                let [cx,cy,xmax,ymax,ex,ey]=[map.x,map.y,map.x+wid,map.y+wid,e.stageX,e.stageY];
                let isHit=(cx<ex&&ex<xmax&&cy<ey&&ey<ymax);
                if(isHit){
                    let c=this.selColor;
                    if(this.isClear){
                        c=colorObj.w;
                        clearMap(map);
                    }
                    let sp=map.getChildAt(0);
                    sp.graphics.beginFill(c);
                    sp.graphics.drawRect(0,0,wid,wid);
                    map.c=c
                }
            }
        }
    })
    stage.addEventListener('stagemouseup',(e)=>{
        this.canColor=false;
        if(!this.isClear){
            autoDoNum();
            checkColor();
        }
    })
    refresh();
    function checkColor(){
        let [cnt,len]=[0,maps.length];
        let colObj={};
        for(let i=0;i<len;i++){
            let map=maps[i];
            if(map.c==colorObj.r){
                cnt++;
            }
            for(let j=i+1;j<len;j++){
                let m2=maps[j];
                if(map.c!=colorObj.w&&map!=m2&&map.c==m2.c){
                    if(!colObj[m2.c]) colObj[m2.c]=[map];
                    colObj[m2.c].push(m2);
                }
            }
        }
        for(let j in colObj){
            let ms=colObj[j];
            len=ms.length;
            if(len>4){
                for(let i=0;i<len;i++){
                    let map=ms[i];
                    map.c=colorObj.w;
                    clearMap(map);
                }
            }
        }
        if(cnt==2){
            this.isRanColor=true;
            this.selColor=Unify.color16ToHtml('random');
        }else if(cnt>2){
            refresh();
        }
    }
    function onChangeColor(e){
        let con=e.currentTarget;
        if(this.selColor){
            if(this.isRanColor){
                this.selColor=Unify.color16ToHtml('random');
            }
            console.log(this.isRanColor,this.selColor)
            con.c=this.selColor;
            if(this.isClear){
                con.c=colorObj.w;
            }
            let sp=con.getChildAt(0);
            sp.graphics.beginFill(con.c);
            sp.graphics.drawRect(0,0,wid,wid);
            this.canColor=true;
        }
    }
    function displayRank(array,xNum=1,xDis=0,yDis=0,x=0,y=0,sign=1)
	{
		for(let i=0;i<array.length;i++){
			let display=array[i];
			display.x=x+parseInt(i%xNum)*(display.width+xDis)*sign;
			display.y=y+parseInt(i/xNum)*(display.height+yDis)*sign;
		}
	}
    function createBox(w,h,c,s=''){
        var con=new createjs.Container();
        con.width=con.height=w;
        var sp=new createjs.Shape;
        sp.graphics.setStrokeStyle(1).beginStroke('black');
        sp.graphics.beginFill(c);
        sp.graphics.drawRect(0,0,w,h);
        sp.width=w,sp.height=h;
        var la=new createjs.Text(s);
        la.x=w/2-10;
        la.y=w/2-5;
        con.addChild(sp);
        con.addChild(la);
        layer.addChild(con);
        return con;
    }
    createjs.Ticker.addEventListener("tick",(e)=>{
        stage.update();
    })
    //--------------
    let names=['清除界面','保存','读取','清除数据','数据处理','单个删除','恢复画图'];
    for(let i=0;i<names.length;i++){
        new Button(document.body,333,40+i*25,names[i],(e)=>{
            let state=names.indexOf(e.target.label);
            if(state==0){
                refresh();
            }else if(state==1){
                saveSure();
            }else if(state==2){
                read();
            }else if(state==3){
                clearData();
            }else if(state==4){
                doData();
            }else if(state==5){
                this.isClear=true;
            }else if(state==6){
                this.isClear=false;
                this.isRanColor=true;
                this.selColor=Unify.color16ToHtml('random');
            }
        });
    }
    let input=new TextInput(document.body,333,250)
    new Button(document.body,433,250,'生成',(e)=>{
        onSelectGame();
    })
    function saveSure(){
        let red;
        let txts=[];
        for(let i=0;i<maps.length;i++){
            let map=maps[i];
            let txt=map.getChildAt(1);
            let t=txt.text;
            if(map.c==colorObj.r){
                red=t;
            }
            if(t.length>3){
                txts.push(t);
            }
        }
        if(txts.length==0){
            TipsManager.alert('无数据可保存')
            return;
        }
        let i=txts.indexOf(red);
        if(i>=0){
            txts.unshift(txts.splice(i,1)[0]);
        }
        txts=txts.toString();
        let str=localStorage.getItem(SAVE_NAME);
        let data;
        try{
            data=JSON.parse(str);
            if(!data.maps.includes(txts)){
                data.maps.push(txts);
            }
        }catch(e){
            data={maps:[]};
            data.maps.push(txts);
        }
        localStorage.setItem(SAVE_NAME,JSON.stringify(data));
        console.log('save',JSON.stringify(data));
        this.data=data;
        refresh();
    }
    function read(){
        var str=localStorage.getItem(SAVE_NAME);
        try{
            var data=JSON.parse(str);
            this.data=data;
            console.log(data);
        }catch(e){
            console.log(e);
        }
    }
    function refresh(){
        for(let i=0;i<maps.length;i++){
            let map=maps[i];
            clearMap(map);
        }
        this.isRanColor=false;
        this.selColor=colorObj.r;
    }
    function clearData(){
        TipsManager.SureCancel('是否清除已经生成好的数据？',(e)=>{
            if(e.detail){
                localStorage.removeItem(SAVE_NAME);
            }
        })
    }
    function doData(){
        if(this.data){
            let maps=this.data.maps;
            let arrStr='';
            for(let i=0;i<maps.length;i++){
                let m=maps[i];
                m=m.split(',').map(a=>Number(a));
                arrStr+=',['+m.toString()+']\n';
            }
            console.log(arrStr)
        }
    }
    /**自动填数*/
    function autoDoNum(){
        let c=this.selColor;
        let ms=[];
        let ts=[];
        for(let i=0;i<maps.length;i++){
            let map=maps[i];
            let txt=map.getChildAt(1);
            let t=txt.text.split(',');
            if(map.c==c){
                ms.push(map);
                ts.push(t);
            }
        }
        if(c==colorObj.w){
            for(let i=0;i<ms.length;i++){
                let map=ms[i];
                let txt=map.getChildAt(1);
                txt.text=txt.text.substr(0,3);
            }
            return;
        }
        if(ts.length==2){
            if(ts[0][0]==ts[1][0]){
                let txt=ms[ts[0][1]>ts[1][1]?1:0].getChildAt(1);
                setText(txt,'0');
            }else{
                let txt=ms[ts[0][1]>ts[1][1]?1:0].getChildAt(1);
                setText(txt,'2');
            }
        }else if(ts.length==3){
            if(ts[0][0]==ts[1][0]){
                let txt=ms[ts[0][1]>ts[1][1]?2:0].getChildAt(1);
                setText(txt,'1');
            }else{
                let txt=ms[ts[0][1]>ts[1][1]?2:0].getChildAt(1);
                setText(txt,'3');
            }
        }
    }
    //设置文本
    function setText(txt,val){
        txt.text=txt.text.substr(0,3)+','+val;
    }
    //清空单个地图
    function clearMap(map){
        map.c=colorObj.w;
        let txt=map.getChildAt(1);
        let ts=txt.text.split(',');
        txt.text=ts[0]+','+ts[1];
        let sp=map.getChildAt(0);
        sp.graphics.beginFill(map.c);
        sp.graphics.drawRect(0,0,wid,wid);
    }
    function onSelectGame(e){
        let as=input.text;
        as=as.split(',')
        console.log(as)
        this.selColor=colorObj.w;
        let len=maps.length;
        for(let i=0;i<len;i++){
            let map=maps[i]
            let txt=map.getChildAt(1);
            let ts=txt.text.split(',');
            txt.text=ts[0]+','+ts[1];
            let sp=map.getChildAt(0);
            sp.graphics.beginFill(this.selColor);
            sp.graphics.drawRect(0,0,wid,wid);
        }
        for(let i=0;i<len;i++){
            let map=maps[i]
            let txt=map.getChildAt(1);
            let ts=txt.text.split(',');
            txt.text=ts[0]+','+ts[1];
            let sp=map.getChildAt(0);
            for(let j=0;j<as.length;j+=3){
                let o={};
                o.s=as[j+2];
                o.p=[as[j+0],as[j+1]];
                if(o.p.toString()==txt.text){
                    if(j==0&&o.s==0){
                        o.c='#ff0000';
                    }else{
                        o.c=Unify.color16ToHtml('random');
                    }
                    sp.graphics.beginFill(o.c);
                    sp.graphics.drawRect(0,0,wid,wid);
                    txt.text+=','+o.s;
                    map.c=o.c;
                    for(let i1=0;i1<len;i1++){
                        let map1=maps[i1];
                        if(map!=map1){
                            let sp1=map1.getChildAt(0);
                            let txt1=map1.getChildAt(1);
                            let ts1=txt1.text.split(',');
                            let canFill=false;
                            if(ts[0]==ts1[0]){
                                if(o.s==0){
                                    if(Number(ts[1])+1==ts1[1]){
                                        canFill=true;
                                    }
                                }else if(o.s==1){
                                    if(Number(ts[1])+1==ts1[1]||Number(ts[1])+2==ts1[1]){
                                        canFill=true;
                                    }
                                }
                            }else if(ts[1]==ts1[1]){
                                if(o.s==2){
                                    if(Number(ts[0])+1==ts1[0]){
                                        canFill=true;
                                    }
                                }else if(o.s==3){
                                    if(Number(ts[0])+1==ts1[0]||Number(ts[0])+2==ts1[0]){
                                        canFill=true;
                                    }
                                }
                            }
                            if(canFill){
                                console.log(ts1,o.c);
                                sp1.graphics.beginFill(o.c);
                                sp1.graphics.drawRect(0,0,wid,wid);
                                map1.c=o.c;
                            }
                        }
                    }
                }
            }
        }
    }
</script>
</body>
</html>